import type { FormSchema } from '@/components/core/schema-form/';

import { getRoleList } from '@/api/system/user/index';
import { Input, message } from 'ant-design-vue';
import useClipboard from 'vue-clipboard3';

// 利用插件点击复制账号密码
const { toClipboard } = useClipboard();
const handleClick = async (value) => {
  if (value.userLogin) {
    try {
      await toClipboard(`账号：${value.userLogin}, 密码：${value.password}`);
      message.success('复制成功');
    } catch (e) {
      console.error(e);
    }
  } else {
    message.info('请先输入账号');
  }
};

export const userSchemas: FormSchema<API.CreateUserParams>[] = [
  {
    field: 'userName',
    component: 'Input',
    label: '人员姓名',
    rules: [{ required: true }],
    componentProps: {
      maxlength: 8,
      showCount: true,
    },
  },
  {
    field: 'sex',
    component: 'RadioGroup',
    label: '性别',
    defaultValue: 1,
    componentProps: {
      options: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 2,
        },
      ],
    },
  },
  {
    field: 'userLogin',
    component: 'Input',
    label: '账号',
    rules: [{ required: true }],
    componentProps: {
      maxlength: 32,
      showCount: true,
    },
  },
  {
    field: 'password',
    label: '初始密码',
    rules: [{ required: true, message: '请输入初始密码' }],
    tigs: '提示：默认密码为 fire123456，可修改初始密码',
    component: ({ formModel, field }) => {
      return (
        <a-input-group compact>
          <Input.Password
            v-model:value={formModel[field]}
            style="width: calc(100% - 116px); border-radius:4px 0 0 4px"
            placeholder="请输入初始密码"
            autocomplete="off"
          />
          <a-button
            type="primary"
            style="border-radius:0 4px 4px 0"
            onClick={() => handleClick(formModel)}
          >
            复制账号密码
          </a-button>
        </a-input-group>
      );
    },
  },
  {
    field: 'phone',
    component: 'Input',
    label: '手机号',
    rules: [
      { required: true },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'deptId',
    component: 'Select',
    label: '部门机构',
    rules: [{ required: true }],
    componentProps: ({ formModel, formInstance }) => {
      return {
        options: [],
        fieldNames: { label: 'name', value: 'id' },
        showSearch: true,
        optionFilterProp: 'name',
        onChange: async (value: string, option) => {
          formModel.deptName = option.name;
          formModel.roleId = undefined;
          formModel.roleName = undefined;
          const { updateSchema } = formInstance;
          const ret = await getRoleList(option.typeId);
          updateSchema([
            {
              field: 'roleId',
              componentProps: {
                options: ret,
              },
            },
          ]);
        },
      };
    },
  },
  {
    field: 'deptName',
    component: 'Input',
    label: '部门机构名称',
    vShow: false,
  },
  {
    field: 'roleId',
    component: 'Select',
    label: '角色',
    rules: [{ required: true }],
    componentProps: ({ formModel, formInstance }) => {
      return {
        options: [],
        fieldNames: { label: 'roleName', value: 'id' },
        showSearch: true,
        optionFilterProp: 'roleName',
        onChange: (value: string, option) => {
          formModel.roleName = option.roleName;
        },
      };
    },
  },
  {
    field: 'roleName',
    component: 'Input',
    label: '角色名称',
    vShow: false,
  },
  {
    field: 'status',
    component: 'Switch',
    label: '账号状态',
    defaultValue: 1,
    componentProps: {
      checkedChildren: '启用',
      unCheckedChildren: '禁用',
      checkedValue: 1,
      unCheckedValue: 0,
    },
    rules: [{ required: true, type: 'number' }],
  },
];

export const resetPwdSchemas: FormSchema<API.CreateUserParams>[] = [
  {
    field: 'password',
    component: 'InputPassword',
    defaultValue: 'fire123456',
    label: '初始密码',
    rules: [{ required: true }],
  },
];
